/* ------------------------------------------ scss mixin ------------------------------------------ */

// 双向居中flex
@mixin display-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

// line-height与height相同
@mixin lineheight-height($line-height: 20px) {
  line-height: $line-height;
  height: $line-height;
}

// 一行超出显示...
@mixin overflow-emphasis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行超出显示...
@mixin line-emphasis($lineCount: 1) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lineCount;
  -webkit-box-orient: vertical;
}

// 清除浮动
@mixin clearfix {
  &:before,
  &:after {
      content: "";
      display: table;
  }
  &:after {
      clear: both;
  }
}

// 居中块元素
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// 三角形
@mixin triangle($width: 10px, $height: 10px, $color:red, $direction: top) {
  $angle-direction: ( top: bottom left right, bottom: top left right, left: right top bottom, right: left top bottom);
  $conf: map-get($angle-direction, $direction);
  @if $direction == top or $direction == bottom {
      $width: $width/2;
  }
  @else {
      $height: $height/2;
  }
  width: 0;
  height: 0;
  border-#{nth($conf, 1)}: $height solid $color;
  border-#{nth($conf, 2)}: $width solid transparent;
  border-#{nth($conf, 3)}: $width solid transparent;
}

// vw画小圆在安卓上会有不圆的情况，用媒体查询 + px进行适配
@mixin small-circle($px, $border-px: 0px, $border-type: solid, $border-color: transparent) {
  @media screen and (max-width: 500px) {
    width: $px;
    height: $px;
    border: $border-px $border-type $border-color;
  }
  @media screen and (min-width: 500px) and (max-width: 767px) {
    width: $px * 1.5;
    height: $px * 1.5;
    border: $border-px * 1.5 $border-type $border-color;
  }
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    width: $px * 2;
    height: $px * 2;
    border: $border-px * 2 $border-type $border-color;
  }
  @media screen and (min-width: 1024px) {
    width: $px * 3;
    height: $px * 3;
    border: $border-px * 3 $border-type $border-color;
  }
}

// button样式清除
@mixin reset-button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
}

// input样式清除
@mixin reset-input {
  border: none;
  outline: none;
  text-decoration: none;
}